<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            v-model 指令可以对常规的html表单标签进行双向数据操作
                    在组件定义时通过组件描述说明也可以让自定义组件标签具有v-model的指令使用功能

            在子组件标签上定义v-model时
                + 会默认以 value 作为自定义属性绑定父组件相关数据变量，实现父向子数据传递
                + 会默认以 input 作为自定义事件名绑定自定义方法并将回传数据作为父组件对应变量的新取值进行赋值,实现子向父数据传递
            注意：在组件定义v-model时，一个组件标签只能使用一个v-model，如果出现多个，
                  最先定义的v-model有效，后续的v-model均无效果
        -->
        <p>自定义组件的加载</p>
        <p>msg:{{ msg }}</p>
        <input type="text" v-model="msg" >

        <!-- <p v-model="msg">测试</p> -->

        <my-input v-model="msg" ></my-input>
        <hr>
        <my-input :value="info" ></my-input>
        <hr>
        <my-input-b v-model="msg"></my-input-b>
    </div>

    <script type="text/x-template" id="my-input">
        <div>
            <!-- <input type="text" :value="value" @input=" updateValue($event.target.value) "> -->
            <input type="text" v-model="temp">
        </div>
    </script>
    <script type="text/x-template" id="my-input-b">
        <div>
            <input type="text" v-model="temp">
        </div>
    </script>

    <script>
        Vue.component("MyInput", {
            template:"#my-input",
            props:{
                value:{}
            },
            computed:{
                temp:{
                    get(){
                        return this.value
                    },
                    set(nv){
                        this.$emit('input',nv)
                    }
                }
            },
            methods: {
                updateValue(nv){
                    this.$emit('input',nv)
                }
            },
            created() {
                console.log( this.$listeners )  
            },
        })

        Vue.component("MyInputB", {
            template:"#my-input-b",
            model:{
                // 自定义 组件 v-model 绑定时的 拦截属性名和自定义事件名
                prop:"v",
                event:"update:v"
            },
            props:{
                v:{}
            },
            computed:{
                temp:{
                    get(){
                        return this.v
                    },
                    set(nv){
                        this.$emit('update:v',nv)
                    }
                }
            },
            created() {
                console.log( "MyInputB=>",this.$listeners )  
            },
        })

        new Vue({
            el:"#app",
            data:{
                msg:"父组件数据msg",
                info:"父组件数据info"

            }
            
        })
    </script>
</body>
</html>